<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid transparent;
            background-color: #6ff;
            margin: 50px;
        }
        .active{
            background-color: pink !important;
            border-color: red !important;
        }
    </style>
</head>
<body>
    <div id="box" class="one two three"></div>
</body>
<script>
    var box = document.getElementById("box");

    console.dir(box);

    // style    获取和设置行内样式  
    // console.log(box.style);

    // 设置行内样式
    // box.style.background = "red";

    // 获取
    // console.log(box.style.background);
    // console.log(box.style.width);
    // console.log(box.style.height);


    // window.getComputedStyle(ele)   获取非行内样式 => 内部 外部 默认 行内

    // window.getComputedStyle(ele)   传入一个元素 返回该元素所有css形成的对象  

    // console.log(window.getComputedStyle(box));
    // console.log(window.getComputedStyle(box).width);
    // console.log(window.getComputedStyle(box).height);
    // console.log(window.getComputedStyle(box).backgroundColor);
    // console.log(window.getComputedStyle(box).borderColor);
    // console.log(window.getComputedStyle(box).padding);


    // IE兼容问题 => IE8一下 没有  window.getComputedStyle  
    // IE  =>  Element.currentStyle   返回该元素所有css形成的对象  
    // console.log(box.currentStyle);
    // console.log(box.currentStyle.width);

    // 兼容写法
    // 判断是否存在此方法 存在=> 常规浏览器 不存在 => IE8
    // if(window.getComputedStyle){ 
    //     console.log(window.getComputedStyle(box).width);
    // }else{
    //     console.log(box.currentStyle.width);
    // }

    // if(window.getComputedStyle){ 
    //     console.log(window.getComputedStyle(box).height);
    // }else{
    //     console.log(box.currentStyle.height);
    // }

    function getStyle(ele,attr){
        if(window.getComputedStyle){  //  常规浏览器
            return window.getComputedStyle(ele)[attr]; // {width:"xxx",height}
        }else{
            return ele.currentStyle[attr];
        }
    }

    console.log(getStyle(box,"width"));;
    console.log(parseInt(getStyle(box,"width"))); // "200.55px"



</script>
</html>